import {Row,Col,Typography,Form,Input,Button , message} from "antd"
import React , {useRef,useEffect}  from 'react'
import "./zhuce.scss"
import { Link, withRouter } from 'react-router-dom'
import { reg } from "../../utils/validate";
import { ajax } from "../../api";
const {Title} =Typography;
// {/* <PhoneOutlined /> */}
// 排版
const layout = {
    labelCol:{
        span:6,
       
    },
    wrapperCol:{
        span:18,
        
    }
}

const layout2 = {
    wrapperCol:{
        span:17,
        offset:7
    }
}


 function Register(props:any) {
   const {history} = props
    const [form] = Form.useForm()
    const rform:any = useRef()
    const onFinish =async (v:any)=>{
        console.log(v);
        console.log(form);
        console.log(rform);
        if(v.password = v.dbpassword){
             // ajax 注册数据
          v.role = 1
         let res = await ajax.register(v)
         if(res.code==200){
          history.push(`/login?username=${v.username}&phone=${v.phone}`)
         }
        }else{
            message.destroy()
            message.error('两次密码不一致')
        }
    }
    const onFinishFailed = ()=>{
        message.destroy()
        message.error('请输入正确的注册信息')
    }

    useEffect(()=>{  
       ajax.testIndex()
    })
    return (
        <div className="login">
        <video 
            className="myvideo"
            id="myvideo"
            autoPlay
            loop
            muted
            playsInline
            src={require('../../assets/images/yanhua.mp4').default} 
            ></video>
             <Row style={{height:'100%'}}>
                    <Col  span={24} >
                        <div className="login-box" style={{height:400}}>
                            <Title className="title" level={3}> 欢迎注册 </Title>
                            <div className="box">
         <Form
      name="normal_login"
      initialValues={{ remember: true }}
      onFinish={onFinish}
      onFinishFailed={onFinishFailed}
      {...layout}
      form={form}
      ref={rform}
    >
      <Form.Item
        label="用户名"
        name="username"
        rules={[{ required: true, message: '请输入用户名' },
   ]}
      >
        <Input  placeholder="请输入用户名"/>
      </Form.Item>

      <Form.Item
        label="手机号"
        name="phone"
        rules={[{ required: true, message: '请输入手机号' },
        {pattern:reg.phone,message:'请输入正确的手机号码'}
    ]}

      >
        <Input  placeholder="请输入手机号"/>
      </Form.Item>

      <Form.Item
        label="密码"
        name="password"
        rules={[{ required: true, message: '请输入密码' },
        {pattern:reg.pwd,message:'请输入6-16位的数字加字母组合'}]}
      >
        <Input.Password   placeholder="请输入密码"/>
      </Form.Item>

      <Form.Item
        label="确认密码"
        name="dbpassword"
        rules={[{ required: true, message: '请输入确认密码' },
        {pattern:reg.pwd,message:'请输入6-16位的数字加字母组合'}]}
      >
        <Input.Password   placeholder="请输入密码"/>
      </Form.Item>

    
      
      <Form.Item {...layout2}>
                    <Button type="primary" block htmlType="submit"> 立即注册</Button>
        </Form.Item>

        <Form.Item {...layout2}>
            <div className="links" style={{width:'100%',display:'flex',justifyContent:"space-between"}}>
                 <Link style={{fontSize:12,color:"#f50"}} to="/login"> 已有账号,立即登录?</Link> 
                 <Link style={{fontSize:12,color:"#0f0"}} to="/forgetpass"> 忘记密码?</Link>    
            </div>
        </Form.Item>
    </Form>
    </div>
    </div>  
                    </Col>
                </Row>
        </div>
    )
}

export default withRouter(Register)